<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type='text/css'>

	body {
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		margin: 0;
	}
	
	h1 {
		margin: 0;
		padding: 0.5em;
		font-size: 1.3em;
	} 
	
	p.description {
		font-size: 0.8em;
		padding: 1em;
		position: absolute;
		top: 3.2em;
		margin-right: 400px;
	}
	
	#calendar_selection {
		font-size: 0.7em;
		position: absolute;
		top: 1em; 
		right: 1em;
		padding: 1em;
		background: #ffc;
		border: 1px solid #dda;
		width: 270px;
	}
	
	#message {
		font-size: 0.7em;
		position: absolute;
		top: 1em; 
		right: 320px;
		padding: 1em;
		background: #ddf;
		border: 1px solid #aad;
		width: 270px;
	}
	
	
</style>
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css' />
<link rel='stylesheet' type='text/css' href='jquery.weekcalendar.css' />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script type='text/javascript' src='jquery.weekcalendar.js'></script>
<script type='text/javascript' src='jquery.form.min.js'></script>
<script type='text/javascript'>


	var year = new Date().getFullYear();
	var month = new Date().getMonth();
	var day = new Date().getDate();
        var lastId = 0;
	var eventData1 = {
			options: {
				timeslotsPerHour: 1,
				timeslotHeight: 20,
                                newEventId : 6
			},
			events : [
			   {"id":1, "start": new Date(year, month, day, 12), "end": new Date(year, month, day, 13, 30),"title":"Lunch with Peter","desc":"Have Lunch with Peter at Chevys and discuss product plan"},
			   {"id":2, "start": new Date(year, month, day, 14), "end": new Date(year, month, day, 14, 45),"title":"Dev Meeting","desc":"Product Release"},
			   {"id":3, "start": new Date(year, month, day + 1, 18), "end": new Date(year, month, day + 1, 18, 45),"title":"Car wash","desc":"Car wash at super auto"},
			   {"id":4, "start": new Date(year, month, day - 1, 8), "end": new Date(year, month, day - 1, 9, 30),"title":"Team breakfast","desc":"Fun Event"},
			   {"id":5, "start": new Date(year, month, day + 1, 14), "end": new Date(year, month, day + 1, 15),"title":"Product showcase","desc":"Discuss about the presentation slides at the board meeting"}
			]
		};

	var eventData2 = {
			options: {
				timeslotsPerHour: 1,
				timeslotHeight: 30,
                                newEventId : 6
			},
			events : [
			   {"id":1, "start": new Date(year, month, day, 12), "end": new Date(year, month, day, 13, 00),"title":"Pay bills","desc":"Pay Utility, Credir card bills"},
			   {"id":2, "start": new Date(year, month, day, 14), "end": new Date(year, month, day, 14, 40),"title":"Soccer practice","desc":"At Mount Hamilton school"},
			   {"id":3, "start": new Date(year, month, day + 1, 18), "end": new Date(year, month, day + 1, 18, 40),"title":"Swim meet","desc":"In Gilroy"},
			   {"id":4, "start": new Date(year, month, day - 1, 8), "end": new Date(year, month, day - 1, 9, 20),"title":"Coffee with Alison","desc":"just to catch up"},
			   {"id":5, "start": new Date(year, month, day + 1, 14), "end": new Date(year, month, day + 1, 15),"title":"Call Mike","desc":"for garrage door repair"}
			]
		};
	   
	$(document).ready(function() {
		var lastEventid = 0;
		var $calendar = $('#calendar').weekCalendar({
			timeslotsPerHour: 4,
			scrollToHourMillis : 0,
			height: function($calendar){
				return $(window).height() - $("h1").outerHeight(true);
			},
			eventRender : function(calEvent, $event) {
				if(calEvent.end.getTime() < new Date().getTime()) {
					$event.css("backgroundColor", "#aaa");
					$event.find(".time").css({"backgroundColor": "#999", "border":"1px solid #888"});
				}
			},
			eventNew : function(calEvent, $event) {
                                var coordinates = $event.offset();
                                $("#editDialog").css("top",coordinates.top-20);
                                $("#editDialog").css("left",coordinates.left+160);
                                 var popupTitle = $event.find(".wc-title").html();
                                var popupDesc = $event.find(".wc-desc").html();
                
                                $("#editDialog_form #formTitle").attr("value",popupTitle);
                                $("#editDialog_form #formMsg").attr("value",popupDesc);
                                $("#editDialog_form #delete").attr('href',calEvent.id);
                                $("#editDialog").show();
                                $("#editDialog_form").ajaxForm({dataType:'json',success : function(data){
                                    $event.find(".wc-title").html(data.newTitle);
                                    $event.find(".wc-desc").html(data.newDesc);
                                    setTimeout(function() {$("#editDialog").hide();},3000);
                                }
                                });
			},
			data: function(start, end, callback) {

				var dataSource = $("#data_source").val();
				if(dataSource === "1") {
					lastId = 5;
					callback(eventData1);
				} else if(dataSource === "2") {
					lastId = 5;
					callback(eventData2);
				} else {
					callback([]);
				}
                        }
		});

		$("#data_source").change(function() {
			$calendar.weekCalendar("refresh");
			updateMessage();
			
		});

		function updateMessage() {
			var dataSource = $("#data_source").val();
			$("#message").fadeOut(function(){
				if(dataSource === "1") {
					$("#message").text("Displaying event data set 1 with timeslots per hour of 4 and timeslot height of 20px");
				} else if(dataSource === "2") {
					$("#message").text("Displaying event data set 2 with timeslots per hour of 3 and timeslot height of 30px");
				} else {
					$("#message").text("Displaying no events.");
				}
				$(this).fadeIn();
			});
		}
		$('#close').click(function()
    		{
        	    $("#editDialog").hide();
    		});
		$('#delete').click(function()
		{
			var deleteId = $(this).attr('href');
			var idNumber = new Number(deleteId);
			$("#calendar").weekCalendar("removeEvent", idNumber.valueOf()); 
			$("#editDialog").hide();
			return false;
		});

		updateMessage();
		
	});

</script>
</head>
<body>
	<h1>Week Calendar Demo (Data supplied config overrides)</h1>
	<p class="description">This calendar demonstrates the ability to return calendar configuration options with an event dataset.</p>
	<div id="message" class="ui-corner-all"></div>
	<div id="calendar_selection" class="ui-corner-all">
		<strong>Event Data Source: </strong>
		<select id="data_source">
			<option value="">Select Event Data</option>
			<option value="1">Work</option>
			<option value="2">Home</option>
		</select>
	</div>
	<div id='calendar'></div>
	<div id='editDialog' style="display:none" >
	   <div id='edit_handle' class='hd'>Change this event details<a href="#" id="close">[ x ]</a></div>
	   <form id="editDialog_form" action="updateCalendar.php" method='post'>
	      <fieldset>
		<label for="title">Name</label>
		<input type="text" name="title" id="formTitle" /><br />
		<label for="desc">Details</label>
		<textarea id="formMsg" name="msg" rows="2" cols="25" maxlength="200"></textarea>
	     </fieldset>
		<input id="send" type="submit" name="send" value="Update" /> OR
		<a href="#" id="delete">Delete</a> this event
	    </form>
        </div>
</body>
</html>
